import React,{useEffect,useState} from 'react'
import $axios,{ImgUrl} from '../../../utils/axios';
import { Button, message,Space, Form, Input,Switch,Modal,Table,Tag    } from 'antd';
import type { ColumnsType } from 'antd/es/table';





export default function PackDetail(props:any) {
    
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '项目编号',
      dataIndex: 'id',
      key: 'id',
        width:'250px'
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '次数',
      dataIndex: 'count',
      key: 'count',
      render: (text) => <span style={{color:'#2984F8'}}>{text}次</span>,
    },
    {
      title: '项目类型',
      key: 'type',
      dataIndex: 'type', //免费项目为0，付费项目为1
      render: (text) => <span>{text==0?'免费项目':'付费项目'}</span>,
    },
    {
        title: '项目介绍',
        key: 'description',
        dataIndex: 'description'
    },
  ];

    const [detailData,setDetailData]=useState<any>()
    useEffect(()=>{
        console.log((props.detailID));
        
      getServiceLabelItem()
    //   debugger
    },[props.detailID])
    // 查询所有服务包以及对应标签以及服务项信息 /api/getServiceLabelItem
    const getServiceLabelItem=()=>{
      $axios({
        url:'/api/getServiceLabelItem',
        method:'post',
      }).then((res:any)=>{
        // console.log(res);
        
        // debugger
        res.data.map((item:any,index:number)=>{
            if(props?.detailID==item.id){
                console.log(item);
                setDetailData(item)
            }
        })
      })
    }
    

  return (
    <div>
        <div style={{borderLeft:'4px solid #2984F8',paddingLeft:'5px',marginBottom:'10px',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <h3>服务包详情</h3>
            <Button size='large' onClick={props.back}>返回</Button>
        </div>
        <div style={{background:'#f2f7fb',padding:'20px 30px',display:'flex',alignItems:'center',borderRadius:'10px',width:'900px',marginBottom:'40px'}}>
            <div style={{width:'250px',height:'200px',marginRight:'20px',borderRadius:"10px",overflow:'hidden'}}>
                <img src={ImgUrl+detailData?.picture} alt="" style={{height:'100%',width:'100%'}} />
            </div>
            <div>
                <h3>{detailData?.name}</h3>
                <div style={{display:'flex',margin:'10px 0'}}>
                    <span style={{color:'#999999',width:'70px'}}>订购定价</span >
                    <span style={{flex:'1'}}>{detailData?.price}元</span>
                    </div>
                <div style={{display:'flex',margin:'10px 0'}}>
                    <span style={{color:'#999999',width:'70px'}}>标签</span>
                    <span style={{flex:'1'}}>
                    <Space size={[0, 'small']} wrap>
                        {detailData?.labelArr.map((item:any,index:number)=>{
                            return <Tag bordered={false} color={item.color||'magenta'} key={index}>
                                        {item.name}
                                    </Tag>
                        })}
                        
                        </Space>
                    </span>
                </div>
                <div style={{display:'flex',margin:'10px 0'}}>
                    <span style={{color:'#999999',width:'70px'}}>服务对象</span>
                    <span style={{flex:'1'}}>{detailData?.targetAudience}</span>
                </div>
                <div style={{display:'flex',margin:'110px0 0'}}>
                    <span style={{color:'#999999',width:'70px'}}>签约周期</span>
                    <span style={{flex:'1'}}>{detailData?.period}(年){detailData?.renewal==0?'可续签':'不可续签'}</span>
                </div>
                <div style={{display:'flex',margin:'10px 0'}}>
                    <span style={{color:'#999999',width:'70px'}}>服务介绍</span>
                    <span style={{flex:'1'}}>{detailData?.description}</span>
                </div>
            </div>
            

        </div>
        <Table columns={columns} dataSource={detailData?.serviceItem} />

        <div>
            <Space>
            <Button type="primary"  size='middle'>编辑</Button>
            <Button type="primary" danger size='middle' >停用</Button>
            <Button  size='middle' onClick={props.back}>返回</Button>
            </Space>
        </div>
    </div>
  )
}
